<template>
  <div style="position: relative; height: 100%;">
    <el-container style="height: 100%;">
      <el-aside width="200px">
        <div style="width: 200px; height: 400px; display: inline-block; padding: 10px; position: absolute; left: 0">
          <div style="width: 100%; height: 630px"> <!-- 版本号内容区域 -->
            <el-scrollbar style="height:100%; overflow-x: hidden;">
              <el-radio-group v-model="selectedVersion">
                <div v-for="(item, index) in versionList" :key="index" style="width: 200px; height: 85px;">
                  <!-- 一条版本号 -->
                  <div style="display: inline-block; position: relative;"> <!-- 左边部分 -->
                    <div style="position: absolute;">
                      <el-radio :label="item.id">版本号：<span>{{ item.version }}</span></el-radio>
                    </div>
                    <div style="position: absolute; top: 18px; left: 6px;">
                      <div v-if="index < versionList.length - 1"
                           style="width: 1px; height: 60px; background-color: #e4e4e4;"></div>
                    </div>
                    <div
                      style="position: absolute; font-size: 10px; width: 150px; top: 20px; left: 23px; color:#959999">
                      类型：<span v-if="item.type===1">手动创建</span>
                      <span v-if="item.type===2">自动创建</span>
                      <span v-if="item.type===3">冲突创建</span>
                      <span v-if="item.type===4">手动修改</span>
                      <span v-if="item.type===5">自动更新</span>
                      <span v-if="item.type===6">冲突更新</span>
                    </div>
                    <div
                      style="position: absolute; font-size: 10px; width: 150px; top: 40px; left: 23px; color: #959999">
                      操作人： {{ $store.state.userList.find(user => user.userName === item.updatedBy).name }}
                    </div>
                    <div
                      style="position: absolute; font-size: 10px; width: 150px; top: 60px; left: 23px; color: #959999">
                      时间:{{ item.updatedTime }}
                    </div>
                  </div>
                </div>
              </el-radio-group>
            </el-scrollbar>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div
          v-if="this.versionType===1 || this.versionType===2"
          style="height: 100%; background-color: #F0F8F8; padding: 30px;">
          <div id="context" style="height: 100%;">
            <div class="nameClass" v-html="term.name"></div>
            <div v-for="nameSourceItem of term.nameSource" style="margin-top:10px;color: #959999;font-size: 10px"
                 v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
            <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                 v-if="UTIL.isNotEmpty(term[prop]) && term[prop].length > 0">
              <div class="fieldName">{{ propName }}：</div>
              <div v-if="typeof term[prop] === 'string'" class="name-content" v-html="term[prop]"></div>
              <div v-else class="name-content" v-html="UTIL.arrayToStr(term[prop], 'value', ';')"></div>
            </div>
            <hr style="margin-left: 0px; margin-top: 20px; width: 60%;"/>
            <div v-if="term.explanation.length > 0">
              <div class="fieldName">释义：</div>
              <div v-for="item in term.explanation" style="margin-top: 15px;">
                <div v-html="item.value"></div>
                <div
                  style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; width: 65%;text-align: right;">
                  <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                  <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                    {{ item.version }} -
                  </div>
                  <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div> <!-- 知识内容 -->
        <div v-if="this.versionType === 4">
          <TermManualCreat :id="this.versionId" :list="this.versionList"></TermManualCreat>
        </div>
        <div v-if="this.versionType === 5">
          <TermAutomaticUpdate :id="this.versionId" :list="this.versionList"></TermAutomaticUpdate>
        </div>
        <div v-if="this.versionType === 6||this.versionType === 3">
          <TermConflictUpdate :id="this.versionId" :list="this.versionList"></TermConflictUpdate>
        </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import TermManualCreat from "./TermManualCreat"
import TermConflictUpdate from "./TermConflictUpdate"
import TermAutomaticUpdate from "./TermAutomaticUpdate"

export default {
  name: "TermHistory",
  components: {
    TermManualCreat,
    TermConflictUpdate,
    TermAutomaticUpdate
  },
  props: {
    id: String
  },
  data() {
    return {
      versionId: "",
      selectedVersion: '',
      versionType: 0,
      versionList: [],
      term: {
        explanation: []
      }
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    loadContent() {
      this.axios.get("/pmph/action/term/selectTermHistory", {
        params: {
          id: this.id
        }
      }).then(response => {
        this.versionList = response.data
        this.selectedVersion = this.versionList[0].id
      })
    }
  },
  watch: {
    id() {
      this.loadContent()
    },
    selectedVersion(value) {
      this.versionId = value
      this.versionType = this.versionList.find(item => item.id === value).type
      this.term = this.versionList[0];
    }
  },
  created() {
    this.loadContent()
  }
}
</script>

<style scoped>
/deep/ .el-scrollbar__wrap {
  overflow: hidden;
}

.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.name-content {
  font-size: 16px;
  display: inline-block;
}

.fieldName {
  font-family: MicrosoftYaHei-Bold, sans-serif;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;
  display: inline-block;
  margin-top: 15px;
}

.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}
</style>
